<html>
	<head>
		<title>My first Three.js app</title>
	</head>
	<body style="background-color: #ffffff;">
		<div id="canvas">
		    <canvas width="1600" height="18"></canvas>
		</div>
		<script src="../build/three.js"></script>
		<script src="../build/THREEx.KeyboardState.js"></script>
		<script>
		    
		    var scene, loader, camera, pointLight, particle, renderer, loader;
		    var mesh, controlers;
		    var keyboard = new THREEx.KeyboardState();
		    //three colock
            var clock = new THREE.Clock();
		    
		    //init function
		    function init(){
		        //get canvas as container
		        var container = document.getElementById( 'canvas' );
		        
		        //program function
                var PI2 = Math.PI * 2;
                var program = function ( context ) {
    
                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.fill();
    
                }
                
                //scene
                scene = new THREE.Scene();
                
		        //camera
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set(0, 0, 15);
                
                //load entity from object JS file(JSON format)
                loader = new THREE.JSONLoader();
                loader.load( 'obj/monkey.js', function ( geometry ) {
    
                    mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ) );
                    scene.add( mesh );
    
                } );
                
                //Ambient Light setting
                scene.add( new THREE.AmbientLight( 0x00020 ) );
                
                //point light setting
                pointLight = new THREE.PointLight(0xffff00, 1, 10);
                //pointLight.position.set(0, 0, 5);
                scene.add(pointLight);
               
                particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
                particle.scale.x = particle.scale.y = particle.scale.z = 0.5;
                scene.add( particle );
                
		        //renderer setting
		        renderer = new THREE.CanvasRenderer();
		        renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                
                //browser windows resert disable
                window.addEventListener( 'resize', onWindowResize, false );
		        
		        renderer.render( scene, camera );
		    }
			
			function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }
            
            function update() {
                
                var delta = clock.getDelta(); // seconds.
                var moveDistance = 1.0;
                var rotateAngle = Math.PI / 2 * delta;
                
                //move forwards/backwards/left/right
                if(keyboard.pressed("W")){
                    mesh.translateZ( -moveDistance );
                }
                if(keyboard.pressed("S")){
                    mesh.translateZ( moveDistance );
                }
                if(keyboard.pressed("Q")){
                    mesh.translateX( -moveDistance );
                }
                if(keyboard.pressed("E")){
                    mesh.translateX( moveDistance );
                }
                
                //global coordinates
                if(keyboard.pressed("left")){
                    mesh.position.x -= moveDistance;
                }
                if(keyboard.pressed("right")){
                    mesh.position.x += moveDistance;
                }
                if(keyboard.pressed("up")){
                    mesh.position.z -= moveDistance;
                }
                if(keyboard.pressed("down")){
                    mesh.position.z += moveDistance;
                }
                
                //rotate left/right/up/down
                var rotationMatrix = new THREE.Matrix4().identity();
                if(keyboard.pressed("A")){
                    rotationMatrix = new THREE.Matrix4().makeRotationY(rotateAngle);
                }
                if(keyboard.pressed("D")){
                    rotationMatrix = new THREE.Matrix4().makeRotationY(-rotateAngle);
                }
                if(keyboard.pressed("R")){
                    rotationMatrix = new THREE.Matrix4().makeRotationX(rotateAngle);
                }
                if(keyboard.pressed("F")){
                    rotationMatrix = new THREE.Matrix4().makeRotationX(-rotateAngle);
                }
                if ( keyboard.pressed("A") || keyboard.pressed("D") || 
                     keyboard.pressed("R") || keyboard.pressed("F") )
                {
                    mesh.matrix.multiply(rotationMatrix);
                    mesh.rotation.setEulerFromRotationMatrix(mesh.matrix);
                }
            }
            
            function animate() {

                requestAnimationFrame( animate );
                render();
                update();
            }
			
			//main function
			function render(){
			    
			    var time = Date.now() * 0.0005;
			    
			    particle.position.x = Math.sin( time * 0.7 ) * 3;
                particle.position.y = Math.cos( time * 0.3 ) * 4;
                particle.position.z = Math.sin( time * 0.5 ) * 3;
			    
			    pointLight.position.x = particle.position.x;
                pointLight.position.y = particle.position.y;
                pointLight.position.z = particle.position.z;
			     
			    renderer.render(scene, camera);
			}
			
			
			init();
			animate();
			update();
		</script>
	</body>
</html>